<template>
  <div class="tableContainer" :style="{ height: height }">
    <el-table
      ref="table"
      v-loading="loading"
      border
      :height="tabHeight ? tabHeight : '100%'"
      highlight-current-row
      row-key="id"
      :data="tableData"
      style="width: 100%; overflow: auto"
      :element-loading-text="loading_text"
      element-loading-background="rgba(0, 0, 0, 0.1)"
      stripe
      :empty-text="empty"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :row-class-name="tableRowName"
      :lazy="lazy"
      :load="lazyLoad"
      :cell-style="cellStyle"
      :span-method="objectSpanMethod"
      :show-summary="isCont"
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
      @header-click="headerClick"
      @cell-click="handleCellClick"
    >
      <el-table-column
        v-if="isCheck"
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        v-for="(col, index) in rowHeader"
        v-if="col.isShow == false ? col.isShow : true"
        ref="colum"
        :key="index"
        :prop="col.prop"
        :label="col.label"
        :sortable="col.sort"
        :width="col.fixedWidth"
        :min-width="col.width"
        :min-hight="col.hight"
        :formatter="col.formatter"
        :align="col.align ? col.align : 'center'"
        class="columnClass"
      >
        <template v-if="!col.children" slot-scope="scope">
          <span
            v-if="col.render"
            :style="col.className ? col.className(scope.row) : ''"
          >
            <!-- 文本 -->
            {{ col.render(scope.row, scope.$index) }}
          </span>
          <!--组合表单 -->
          <div v-else-if="col.group" style="display: flex">
            <div
              v-for="child in col.groupList"
              :key="child.prop"
              class="groupList"
            >
              <span :class="child.class">{{ child.first }}</span>
              <el-input
                v-if="child.type === 'Input'"
                v-model="scope.row[child.prop]"
                :clearable="child.clearable"
                :style="{ width: child.width + '%' }"
                @clear="child.clear()"
                @blur="
                  child.blur
                    ? child.blur(scope.row[child.prop], scope.$index)
                    : ''
                "
              />
              <span :class="child.class">{{ child.name }}</span>
              <!-- <el-input
                v-if="child.type === 'Input'"
                v-model="scope.row[child.prop]"
                :clearable="child.clearable"
                @clear="child.clear()"
                :style="{ width: child.width + '%' }"
                @blur="child.blur ? child.blur(scope.row[child.prop]) : ''"
              /> -->
            </div>
          </div>
          <!-- 开关 -->
          <el-switch
            v-else-if="col.switch"
            v-model="scope.row[col.prop]"
            :active-text="col.active_text"
            :inactive-text="col.inactive_text"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="col.active_value"
            :inactive-value="col.inactive_value"
            @change="col.change(scope.row, scope.$index)"
          />
          <!-- 图片 -->
          <img
            v-else-if="col.img"
            :src="scope.row[col.prop]"
            style="width: 50px"
            alt=""
          />
          <!-- 换行字 -->
          <div v-else-if="col.groupText">
            <p v-if="col.first" :class="col.firstClass">
              {{ scope.row[col.prop] }}
            </p>
            <p v-if="col.second" :class="col.secondClass">
              {{ scope.row[col.prop2] }}
            </p>
          </div>
          <!-- input框 -->
          <el-input
            v-else-if="
              col.inputFn ? col.inputFn(scope.row, scope.$index) : col.input
            "
            v-model="scope.row[col.prop]"
          />
          <!-- 选择日期 -->
          <el-date-picker
            v-else-if="
              col.dateFn ? col.dateFn(scope.row, scope.$index) : col.date
            "
            v-model="scope.row[col.prop]"
            type="date"
            :class="col.class"
            value-format="yyyy-MM-dd"
            placeholder="请选择日期"
          />
          <span
            v-else
            :style="col.className ? col.className(scope.row) : ''"
            v-html="scope.row[col.prop]"
            >{{ scope.row[col.prop] }}</span
          >
        </template>
        <!-- v-if="col.children" -->
        <el-table-column
          v-for="(child, index) in col.children"
          v-if="child.isShow == false ? child.isShow : true"
          :key="index"
          :prop="child.prop"
          :label="child.label"
          :align="col.align ? col.align : 'center'"
          :min-width="child.width"
        >
          <template v-if="!child.son" slot-scope="scope">
            <span
              v-if="child.render"
              :style="child.className ? child.className(scope.row) : ''"
            >
              {{ child.render(scope.row, scope.$index) }}
            </span>
            <!-- input框 -->
            <el-input
              v-else-if="
                child.inputFn
                  ? child.inputFn(scope.row, scope.$index)
                  : child.input
              "
              v-model="scope.row[child.prop]"
            />

            <span
              v-else
              :style="child.className ? child.className(scope.row) : ''"
            >
              {{ scope.row[child.prop] }}
            </span>
          </template>
          <!-- v-if="child.son"  -->
          <el-table-column
            v-for="(item, index) in child.son"
            v-if="item.isShow == false ? item.isShow : true"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :align="col.align ? col.align : 'center'"
            :min-width="child.width"
          >
            <template slot-scope="scope">
              <span
                v-if="item.render"
                :style="item.className ? item.className(scope.row) : ''"
              >
                {{ item.render(scope.row, scope.$index) }}
              </span>
              <!-- input框 -->
              <el-input
                v-else-if="
                  item.inputFn
                    ? item.inputFn(scope.row, scope.$index)
                    : item.input
                "
                v-model="scope.row[item.prop]"
              />

              <span
                v-else
                :style="item.className ? item.className(scope.row) : ''"
              >
                {{ scope.row[item.prop] }}
              </span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>

      <slot name="pass" />
      <!-- 操作 -->
      <el-table-column
        v-if="tableOption.label"
        :min-width="tableOption.width"
        :width="tableOption.width"
        :label="tableOption.label"
        class-name="small-padding fixed-width"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-for="(item, index) in tableOption.options"
            v-if="
              item.tableOptionRender ? item.tableOptionRender(scope.row) : true
            "
            :key="index"
            :style="item.style"
            plain
            :class="
              item.className ? item.className(scope.row, scope.$index) : ''
            "
            :type="item.type ? item.type : 'primary'"
            :icon="item.icon"
            :circle="item.circle"
            size="mini"
            :disabled="
              item.disabledRender
                ? item.disabledRender(scope.row, scope.$index)
                : item.disabled
            "
            @click.native.stop="
              handleButton(item.methods, tableData, scope.row, scope.$index)
            "
          >
            {{ item.labelRender ? item.labelRender(scope.row) : item.label }}
            <svg-icon v-if="item.svgIcon" :icon-class="item.svgIcon" />
          </el-button>
          <el-switch
            v-if="tableOption.switch"
            v-model="scope.row[tableOption.switchCon.prop]"
            :active-text="tableOption.switchCon.active_text"
            :inactive-text="tableOption.switchCon.inactive_text"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="tableOption.switchCon.active_value"
            :inactive-value="tableOption.switchCon.inactive_value"
            @change="tableOption.switchCon.change(scope.row, scope.$index)"
          />
        </template>
      </el-table-column>
      <slot />
    </el-table>
    <!-- 是否调用分页 -->
    <el-pagination
      v-if="isHidden"
      background
      class="tablePage"
      layout="total, sizes,prev, pager, next, jumper"
      :page-size="pageObj.size"
      :page-sizes="pageObj.pageSizes"
      :total="pageObj.total"
      :current-page="pageObj.currentPage"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>
<script>
export default {
  props: {
    provinceArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
    provincePos: {
      type: Number,
      default: 0,
    },
    ishome: {
      type: Boolean,
      default: false,
    },
    tabHeight: {
      type: String,
      default: "",
    },
    isfen: {
      type: Boolean,
      default: false,
    },
    isCont: {
      type: Boolean,
      default: false,
    },
    height: {
      type: String,
      default: "",
    },
    tableRowName: {
      type: String,
      default: "tableRowClass",
    },
    lazy: {
      type: Boolean,
      default: false,
    },
    isCheck: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    loading_text: {
      type: String,
      default: "拼命加载中...",
    },
    active_text: {
      type: String,
      default: "",
    },
    inactive_text: {
      type: String,
      default: "",
    },
    active_value: {
      type: Number,
      default: 0,
    },
    inactive_value: {
      type: Number,
      default: 1,
    },
    empty: {
      type: String,
      default: "  ",
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    isHidden: {
      type: Boolean,
      default: true,
    },
    treeObj: {
      type: Object,
      default: () => {
        return {
          children: "children",
          hasChildren: "hasChildren",
        };
      },
    },
    keys: {
      type: String,
      default: "id",
    },
    rowHeader: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableOption: {
      type: Object,
      default: () => {
        return {};
      },
    },
    pageObj: {
      type: Object | Boolean,
      default: () => {
        return {
          size: 10,
          total: 0,
          pageSizes: [10, 50, 100, 200],
          currentPage: 1,
        };
      },
    },
  },
  data() {
    return {
      flag: false,
      columnId: "",
    };
  },
  watch: {
    columnId: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.flag = false;
          const cla = document.getElementsByClassName(oldVal);
          var newArr = Array.from(cla);
          newArr.map((item) => {
            if (this.flag == false) {
              item.style.backgroundColor = "";
            }
          });
        }
      },
      deep: true,
    },
  },
  methods: {
    lazyLoad(row, treeNode, resolve) {
      this.$emit("lazyLoad", row, treeNode, resolve);
    },
    handleSortChange(column, prop, order) {
      this.$emit("handleSortChange", column, prop, order);
    },
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    handleButton(method, data, row, index) {
      this.$emit("handleButton", method, data, row, index);
    },
    handleRowClick(row, column, event) {
      this.$emit("handleRowClick", row, column);
    },
    cellStyle(row, column, rowIndex, columnIndex) {
      this.$emit("cellStyle", row, column, rowIndex, columnIndex);
    },
    headerClick(column, event) {
      this.$emit("headerClick", column, event);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      this.$emit("objectSpanMethod", { row, column, rowIndex, columnIndex });
      if (this.isfen) {
        if (columnIndex === 0) {
          if (rowIndex % 12 == 0) {
            return {
              rowspan: 12,
              colspan: 1,
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
        if (column.label == "记录事项") {
          if (rowIndex % 6 == 0) {
            return {
              rowspan: 6,
              colspan: 1,
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      } else if (this.ishome) {
        if (columnIndex === 0) {
          const _row = this.provinceArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col,
          };
        }
      }
    },
    getSummaries(param) {
      this.$emit("getSummaries", param);
    },
    headerClick(column, event) {
      if (this.columnId == column.id) {
        this.flag = false;
      } else {
        this.flag = true;
      }
      this.columnId = column.id;
      const cla = document.getElementsByClassName(column.id);
      var newArr = Array.from(cla);
      newArr.map((item) => {
        if (this.flag) {
          item.style.backgroundColor = "rgb(230, 247, 255)";
        } else {
          item.style.backgroundColor = "";
        }
      });
    },
    handleCellClick(row, column, cell, event) {
      this.$emit("handleCellClick", row, column, cell, event);
    },
  },
};
</script>
<style lang="scss" scoped>
.tableContainer {
  position: relative;
  height: calc(100vh - 180px);
  .el-button {
    .svg-icon {
      font-size: 15px;
    }
    &:hover {
      .svg-icon {
        font-size: 17px;
      }
    }
  }
}
.tablePage {
  width: 100%;
  position: absolute;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
  text-align: center;
}
</style>
<style lang="scss">
.tableRowClass {
  height: 6.5vh;
}

.cellBackground {
  background-color: red !important;
}
.el-table--border th {
  background: #f2f2f2;
  color: #333;
  font-weight: normal;
}
</style>
